<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>报修管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>

    <style>
        .layui-form-item .layui-inline {
            margin-right: 10px;
        }

        .layui-form-item .layui-input-inline {
            width: 150px;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px;">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">维修人员</label>
                            <div class="layui-input-inline">
                                <input type="text" name="name" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">报修人员</label>
                            <div class="layui-input-inline">
                                <input type="text" name="residentName" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 批量删除 </button>
            </div>
        </script>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
        </script>
    </div>

    <!-- 处理申请弹窗 -->
    <div id="edit" style="display: none">
        <div class="layui-form layuimini-form" lay-filter="editForm">
            <div class="layui-form-item" id="recordId">
                <label class="layui-form-label">记录ID</label>
                <div class="layui-input-inline">
                    <input type="text" name="recordId" placeholder="请输入记录ID" readonly value="" class="layui-input layui-disabled">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">报修人员</label>
                <div class="layui-input-inline">
                    <input type="text" name="residentName" lay-verify="required" lay-reqtext="报修人员不能为空" placeholder="请输入报修人员" value="" class="layui-input">

                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label required">维修人员</label>
                <div class="layui-input-inline">
                    <select name="name" id="repairMan">
                        <option value="0">请选择维修人员</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">维修描述</label>
                <div class="layui-input-inline">

                    <textarea name="repairDescription"  maxlength="200" id="repairDescription" placeholder="请输入维修描述" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">费用</label>
                <div class="layui-input-inline">
                    <input type="number" name="cost" lay-verify="required" lay-reqtext="费用不能为空" placeholder="请输入费用" value="" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label required">完成情况</label>
                <div class="layui-input-inline">
                    <select name="status">
                        <option value="0">待处理</option>
                        <option value="1">处理中</option>
                        <option value="2">已完成</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label ">完成时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="completedAt"   placeholder="请选择完成时间" value="" class="layui-input" onclick="layui.laydate.render({elem: this})">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['form', 'table'], function () {
        var $ = layui.jquery;
        let form = layui.form;
        let table = layui.table;

        let tag = -1; // 0 表示新增，1表示编辑

        $.ajaxSetup({
            beforeSend: function(xhr) {
                const data = JSON.parse(localStorage.getItem('user'));
                //输出token
                console.log(data.token);
                if (data.token) {
                    xhr.setRequestHeader('Authorization', 'Bearer ' + data.token);
                }
            }
        });
        function loadSelectOptions(url, selectId) {
            $.getJSON(url, function (res) {
                if (res.code === 0 && res.data  ) {
                    var options = '';
                    res.data.forEach(function (item) {
                        options += `<option value="${item.id}">${item.value}</option>`;
                    });
                    $(selectId).append(options);
                    form.render('select');
                }
            });
        }

        loadSelectOptions('/repairMan/getRepairManOptions', '#repairMan');
        // 全局设置ajax请求头

        table.render({
            elem: '#currentTableId',
            url: '/repair/all',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            parseData: function (res) {
                return {
                    "code": res.code,
                    "msg": res.message,
                    "count": res.count,
                    "data": res.data.list
                };
            },
            cols: [[
                { type: "checkbox", width: 20},
                { field: 'recordId', title: '记录ID', sort: true },
                { field: 'residentName',  title: '报修人员', sort: true },
                { field: 'name', title: '维修人员', sort: true },
                { field: 'phone', title: '维修人员手机号', sort: true },
                { field: 'idCard', title: '身份证号', sort: true },
                { field: 'repairDescription',title: '维修描述', sort: true },
                { field: 'cost', title: '费用', sort: true },
                { field: 'status', title: '状态', sort: true , templet: function (d) {
                    switch (d.status){
                        case 0:
                            return '<span style="color: red">待处理</span>';
                        case 2:
                            return '<span style="color: green">已完成</span>';
                        case 1:
                        return '<span style="color: blue">处理中</span>';
                    }

                    }},
                { field: 'createTime', title: '申请时间', sort: true },
                { field: 'requestId', title: '申请时间', sort: true,hide: true },
                { field: 'completedAt',  title: '完成时间', sort: true
                , templet: function (d) {

                    if (d.completedAt === null || d.completedAt === '' ){
                        return '-';
                    }
                    return d.completedAt;
                }
                },
                { title: '操作', minWidth: 100, toolbar: '#currentTableBar', align: "center" }
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            skin: 'line',
            response: {
                statusName: 'code',
                statusCode: 0,
                msgName: 'message',
                countName: 'count',
                dataName: 'data'
            }
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            table.reload('currentTableId', {
                page: { curr: 1 },
                where: data.field
            }, 'data');
            return false;
        });

        /**
         * toolbar监听事件
         */
        table.on('toolbar(currentTableFilter)', function (obj) {
            if (obj.event === 'add') {
                $("#recordId").hide()
                tag = 0; // 表示新增
                var index = layer.open({
                    title: '添加报修记录',
                    type: 1,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['40%', '60%'],
                    content: $("#edit")
                });
                form.val("editForm", {
                    "recordId": "",
                    "residentName": "",
                    "name": "",
                    "repairDescription": "",
                    "cost": "",
                    "completedAt": "",
                    createTime:''
                });

                $(window).on("resize", function () {
                    layer.full(index);
                });
            } else if (obj.event === 'delete') {
                var checkStatus = table.checkStatus('currentTableId'),
                    data = checkStatus.data;
                const recordIds = data.map(item => item.recordId);

                $.ajax({
                    url: '/repair/deleteBatch',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(recordIds),
                    dataType: 'json',
                    success: function (res) {
                        if (res.code === 0) {
                            layer.msg('删除成功');
                            table.reload('currentTableId');
                        } else {
                            layer.msg(res.message || '删除失败');
                        }
                    },
                    error: function () {
                        layer.msg('网络异常');
                    }
                });
            }
        });

        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                tag = 1;
                console.log("request+", data)
                                $("#recordId").show()
                var index = layer.open({
                    title: '编辑报修记录',
                    type: 1,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['40%', '60%'],
                    content: $("#edit")
                });
                form.val("editForm", data);

                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            } else if (obj.event === 'delete') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    layer.close(index);
                });
            }
        });

        form.on('submit(saveBtn)', function (data) {
            var field = data.field;
            console.log(field, "edit");
            var url = tag === 1 ? "/repair/update" : "/repair/add";

            $.ajax({
                type: "POST",
                url: url,
                contentType: "application/json",
                data: JSON.stringify(field),
                success: function (res) {
                    if (res.code === 0) {
                        layer.msg(res.message );
                        location.reload();
                    } else {
                        layer.msg(res.message );
                    }
                },
                error: function (err) {
                    layer.msg(err);
                },
                dataType: "json"
            });

            return false;
        });
    });
</script>
</body>
</html>
